import { useLocation } from 'react-router-dom'
/* -------------------------------------------------------- Declare -- */
const { $lazy, $fn } = window
/* -------------------------------------------------------- Async Component -- */
const SearchTable = $lazy.hook(()=>import('#cpt/temp/SearchTable'))
/* -------------------------------------------------------- Page Component -- */
const Component = ({ title, api, labelWidth='s3', width='40%', rule='num_no', maxLen=30, is_value, type, map }) => {
	const { pathname } = useLocation()
	if( $fn.hasObject(map) ){
		for(let i in map){
			if( pathname.endsWith(i) ) api = map[i].api
		}
	}
	const addConfig = {
		modal: {
			title,
			width,
		},
		form: {
			labelWidth,
			data: [
				is_value ? { label: '编号', name: 'value', r:1, rule } : null,
				type === 'percent' ? { label: '名称', name: 'label', r:1, type:'number', range: [0,100], unit:'%'} : { label: '名称', name: 'label', r:1, maxLen}
			]
		},
		onEnd : d => $fn.getStrNo(addConfig, d)
	}
	
	const config = {
		page : {
			title,
			controls	: [
				{ label:'新增', mode:'add', r:1 },
				{ mode:'del', abs:1 },
				{ mode:'refresh'}
			]
		},
		// 表格配置
		table: {
			api 		: api,
			addConfig,
			paging 		: 0,
			clearCache 	: 1,
			row 		:{},
			// idStr 		: 'value',
			cols		: [
				{ title: '编号', 			dataIndex: 'value', width:100 },
				{ title: '名称', 			dataIndex: 'label' }
			],
			controls 	: {
				width: 240,
				data: () => [
					{ mode:'mod', config:addConfig, abs:1 }, 
					{ mode:'delPop', abs:1 },
				]
			}
		}
	}
	return <SearchTable {...config}/>
}
export default Component